<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>39 - jQuery</title>
</head>
<body>
    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>

        // 获取元素                 $('css选择器')
        // 注册事件                 $('css选择器').事件类型(function(){})
        // 操作标签行内样式         jQuery对象.css({'css属性': 值})
        // 操作标签类样式           jQuery对象.addClass('类名')     
        // 移除类样式               jQuery对象.removeClass('类名')      
        // 切换类样式               jQuery对象.toggleClass('类名')
        // 链式编程                 jQuery对象.事件.样式

        // 根据标签关系获取元素  
        // 根据父元素获取子元素
        //     jQuery对象.children()            获取所有直接子元素
        //     jQuery对象.find('css选择器')     获取指定的子元素

        // 根据子元素获取父元素
        //     jQuery对象.parent()               获取直接父元素
        //     jQuery对象.parents()              获取所有的父元素
        //     jQuery对象.parents('css选择器')   获取指定的父元素

        // 获取兄弟元素
        //     jQuery对象.siblings()               获取所有的兄弟元素
        //     jQuery对象.siblings('css选择器')    获取指定的兄弟元素

        // jQuery中实现委托的方式:
        // 语法:   jQuery对象.on('事件类型', '选择器', function(){})


        // jQuery操作标签的自定义属性和标准属性
        // 操作标签自定义属性:   
        // 获取:   jQuery对象.attr('自定义属性名')  
        // 设置:   jQuery对象.attr('自定义属性名', 值)

        // 操作标签标准属性
        // 获取:   jQuery对象.prop('属性名')
        // 设置:   jQuery对象.prop('属性名', 值)

        // 表单元素
        // 获取内容:        jQuery对象.val();
        // 设置内容:        jQuery对象.val(值);

        // 非表单元素
        // 获取内容:        jQuery对象.html()       jQuery对象.text();
        // 设置内容:        jQuery对象.html(值)     jQuery对象.text(值);
        // 二者的区别和innerHTML和innerText的区别一样!!!!

        // 隐藏标签和显示标签
        // 隐藏标签:        jQuery对象.hide();
        // 显示标签:        jQuery对象.show();

        // jQuery中动态创建元素       
        // 语法:   $('完整的html标签')

        // jQuery中链式编程 (事件连到一块写)
        // 语法:   变量.click(function(){}).mouseenter(function(){}).mouseleave(function(){});  

        // 点击按钮变颜色 (排他)
        // 语法:   变量.click(function(){$(this).css({'color': ''}).siblings().css({'color': ''})});









    </script>
</body>
</html>